<template>
  <el-container class="home-container">
    <!-- 顶部 -->
    <el-header>
      <div class="header_div1">
        <img src="../assets/logo.png" alt="" />
        <!-- <span>爱矿云</span> -->
      </div>
      <div class="header_div2">
        <span>安徽</span>
        <!-- <el-button type="danger" icon="el-icon-delete" circle></el-button> -->
        <el-button size="mini" round type="success" plain @click="back">退出</el-button>
      </div>
    </el-header>
    <el-container>
        <!-- 侧边栏 -->
      <el-aside :width= "isCollapse ? '64px':'200px'">
        <!-- 菜单展开隐藏 -->
        <div class="aside_div1" @click="toggleCollapse">
            <span class="el-icon-s-fold" v-if="isOff"></span>
            <span class="el-icon-s-unfold" v-if="!isOff"></span>
        </div>
        <!-- 主菜单" -->
        <el-menu :default-active="NavState" router unique-opened class="el-menu-vertical-demo" :collapse="isCollapse" :collapse-transition="false">
            <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                <!-- 一级菜单 -->
                <template slot="title">
                    <i :class="iconsObj[item.id]"></i>
                    <span>{{item.permissionNameCn}}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item :index="'/'+chitem.permissionName" v-for="chitem in item.erList" :key="chitem.id" @click="saveNavState('/'+chitem.permissionName)">
                  <i :class="iconsObj[chitem.id]"></i>
                  <span>{{chitem.permissionNameCn}}</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 主体 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 底部 -->
    <el-footer>
      <div class="footer_div1">
        <span>首巢（杭州）数字科技有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span>
      </div>
    </el-footer>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: false,
      isOff:true,
      NavState:"",
      menuList:[
        // {name:"用户管理",id:1,children:[{chname:"姓名查询",id:11,path:"/namesearch"},{chname:"用户详情",id:12,path:"/userinfo"}]},
        // {name:"渠道商",id:2,children:[{chname:"渠道商审核",id:22,path:"/qdsSH"},{chname:"渠道商管理",id:23,path:"/qdsGL"}]},
        // {name:"提现管理",id:3,children:[{chname:"提现申请",id:32,path:"/txSQ"},{chname:"提现记录",id:33,path:"/txJL"}]},
        // {name:"信息管理",id:4,children:[{chname:"用户信息",id:42,path:"/userMsg"},{chname:"商品信息",id:43,path:"/commodityMsg"}]},
        // {name:"购买管理",id:5,children:[{chname:"购买记录",id:52,path:"/buyJL"}]},
        // {name:"资金池",id:6,children:[{chname:"资金池管理",id:62,path:"/capitalPoolGL"}]},
        // {name:"APP管理",id:7,children:[{chname:"APP设置",id:72,path:"/appSet"}]},
      ],
      iconsObj:{
        "1":"el-icon-star-on",
        "2":"el-icon-s-goods",
        "3":"el-icon-star-on",
        "4":"el-icon-present",
        "5":"el-icon-basketball",
        "6":"el-icon-bangzhu",
        "7":"el-icon-cpu",
      }
    };
  },
  created(){
    // this.getMenuList()
    // 获取激活选项
    this.NavState=window.sessionStorage.getItem("NavState")
  },
  methods: {
    //  退出账号
   async back() {
      // const {data:res} = await this.$http.post("logout")
      // if(res.code !==200) return console.log(res.msg)
      // this.$message.success(res.msg)
      window.sessionStorage.clear("token");
      this.$router.push("/login");
    },
    // 菜单栏展开隐藏
    toggleCollapse(){
        this.isCollapse = !this.isCollapse
        this.isOff=!this.isOff
    },
    // 获取菜单栏
  //  async getMenuList(){
  //   const {data:res} = await this.$http.post("getMenu")
  //   console.log(res)
  //     if(res.code !==200) return this.$message.error(res.data.msg)
  //       this.menuList=res.data
  //   },
    // 保存激活选项
    saveNavState(NavState){
      window.sessionStorage.setItem("NavState",NavState)
      this.NavState=this.NavState
    },
  },
};
</script>
<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  background: #67C23A;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  .header_div1 {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 150px;
      // border-radius: 50%;
    }
    span {
      margin-left: 15px;
      font-size: 16px;
    }
  }
  .header_div2 {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-right: 15px;
    }
  }
}
.el-aside {
  background: #F2F6FC;
  .el-menu{
      border-right: none;
  }
  .aside_div1{
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
  }
}
.el-footer{
  background: #000;
  .footer_div1{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
}
</style>
